<template>
  <div id="app">
    <transition name="slide-left">
      <router-view class="child-view"></router-view>
    </transition>
  </div>
</template>

<script>
  export default {
    name: 'app'
  }
</script>

<style lang="less">
  .child-view {
    transition: all .5s ease;
  }
  .slide-left-enter, .slide-right-leave-active {
    opacity: 0;
    -webkit-transform: translate(50%, 20);
    transform: translate(50%, 20);
  }

  .slide-left-leave-active, .slide-right-enter {
    opacity: 0;
    -webkit-transform: translate(50%, 20);
    transform: translate(50%, 20);
  }


  * {
    box-sizing: content-box;
    overflow-scrolling: touch;
    user-select: none;
    font-family: 'Open Sans',sans-serif;
  }

  body {
    /*background-color: rgba(0,0,0,0.1);*/
    position: absolute;
    top: 0;
    left: 0;
    margin: 0 0 0 0;
    width: 100%;
    overflow: hidden;
    height: 100%;
  }

  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    width: 100%;
    height: 100%;
  }

  @media only screen and (min-device-width: 320px)and (-webkit-min-device-pixel-ratio: 2) {
    /*针对iPhone 4, 5c,5s, 所有iPhone6的放大模式，个别iPhone6的标准模式*/
    html {
      font-size: 10px;
    }
  }

  @media only screen and (min-device-width: 375px)and (-webkit-min-device-pixel-ratio: 2) {
    /*针对大多数iPhone6的标准模式*/
    html {
      font-size: 12px;
    }
  }

  @media only screen and (min-device-width: 375px)and (-webkit-min-device-pixel-ratio: 3) {
    /*针对所有iPhone6+的放大模式*/
    html {
      font-size: 16px;
    }
  }

  @media only screen and (min-device-width: 412px) and (-webkit-min-device-pixel-ratio: 3) {
    /*针对所有iPhone6+的标准模式,414px写为412px是由于三星Nexus 6为412px，可一并处理*/
    html {
      font-size: 20px;
    }
  }

  @media only screen and (-webkit-device-pixel-ratio: .75) {
    /*低分辨率小尺寸的图片样式*/

  }

  @media only screen and (-webkit-device-pixel-ratio: 1) {
    /*普通分辨率普通尺寸的图片样式*/

  }

  @media only screen and (-webkit-device-pixel-ratio: 1.5) {
    /*高分辨率大尺寸的图片样式*/

  }
</style>
